<template>
  <div class="RecruiterLayout">
    <!-- 标题 -->
    <!--职位管理-->
    <Title>
      <template #default>{{ title }}</template>
    </Title>
    <!-- 内容区 -->
    <section class="contentLayout">
      <el-card>
        <div class="nav">
          <el-button icon="Plus" type="primary" @click="openFormVisible('新建',false)">新建</el-button>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="刷新"
              placement="top"
          >
            <el-button :type="'text'" @click="Refresh"><el-icon size="19"><RefreshRight/></el-icon></el-button>
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="密度"
              placement="top"
          >
            <el-dropdown placement="bottom-start" trigger="click" size='large'>
              <el-button type="text"><el-icon size="18"><Sort/></el-icon></el-button>
              <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item
                      @click="changeSize('紧凑')"
                      :style="{backgroundColor:active1===true ?'#E6F7FF' : ''}">
                    紧凑
                  </el-dropdown-item>
                  <el-dropdown-item
                      @click="changeSize('默认')"
                      :style="{backgroundColor:active2===true ?'#E6F7FF' : ''}">
                    默认
                  </el-dropdown-item>
                  <el-dropdown-item
                      @click="changeSize('疏松')"
                      :style="{backgroundColor:active3===true ?'#E6F7FF' : ''}">
                    疏松
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="列设置"
              placement="top"
          >
            <el-button type="text"><el-icon size="18"><Setting/></el-icon></el-button>
          </el-tooltip>
        </div>
        <!-- 新建/编辑弹窗 -->
        <el-dialog
            class="dialogFormVisible"
            v-model="dialogFormVisible"
            :title="dialogTitle"
            width="640"
            :before-close="handleClose">
          <el-form :model="addJobStore" ref="FormRef" :rules="rules" label-position="top" :label-width="formLabelWidth " >
            <el-form-item prop="post_id" label="岗位"  style="margin-top: 20px">
              <el-input
                  v-model="addJobStore.post_id"
                  autocomplete="off"
                  clearable
                  placeholder="请填写岗位"  />
            </el-form-item>
            <el-form-item prop="company_id" label="所属分行">
              <el-select v-model="addJobStore.company_id" placeholder="请选择所属分行" clearable>
                <el-option label="中信银行重庆分行" value="BLCDJ1QG" />
                <el-option label="中信银行陕西分行" value="DTBAFH88" />
                <el-option label="中信银行福建分行" value="FDII2D5I" />
                <el-option label="中信银行北京分行" value="FDK26OTS" />
                <el-option label="中信银行上海分行" value="IJBE1P93" />
                <el-option label="中信银行湖南分行" value="K6LR9BR6" />
                <el-option label="中信银行石家庄分行" value="P4KNVEU3" />
                <el-option label="中信银行广州分行" value="QKH0CED8"/>
                <el-option label="中信银行天津分行" value="5T80RDJB" />n
              </el-select>
            </el-form-item>
            <el-form-item prop="post_id" label="负责人" >
              <el-input
                  v-model="addJobStore.owner_id"
                  autocomplete="off"
                  clearable
                  placeholder="请输入负责人"  />
            </el-form-item>
            <el-form-item prop="job_type" label="工作类型" >
              <el-select v-model="addJobStore.job_type" placeholder="请选择工作类型" clearable>
                <el-option label="不限" :value="0" />
                <el-option label="全职" :value="1" />
                <el-option label="兼职/临时" :value="2" />
                <el-option label="实习" :value="3" />
                <el-option label="校园" :value="4" />
              </el-select>
            </el-form-item>
            <el-form-item prop="min_education" label="学历" >
              <el-select v-model="addJobStore.min_education" placeholder="请选择最低学历" clearable>
                <el-option label="不限" :value="0" />
                <el-option label="初中及以下" :value="1" />
                <el-option label="高中" :value="2" />
                <el-option label="大专" :value="3" />
                <el-option label="本科" :value="4" />
                <el-option label="硕士" :value="5" />
                <el-option label="博士" :value="6" />
              </el-select>
            </el-form-item>
            <el-form-item prop="exp_require" label="经验要求" >
              <el-select v-model="addJobStore.exp_require" placeholder="请选择工作经验" clearable>
                <el-option label="不限" :value="0" />
                <el-option label="一年以下" :value="1" />
                <el-option label="1-3年" :value="2" />
                <el-option label="3-5年" :value="3" />
                <el-option label="5-10" :value="4" />
                <el-option label="10年以上" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item prop="salary" label="薪资范围" >
              <el-select v-model="addJobStore.salary" placeholder="请选择薪资范围" clearable>
                <el-option label="不限" :value="0" />
                <el-option label="4k以下" :value="1" />
                <el-option label="4k-6k" :value="2" />
                <el-option label="6k-8k" :value="3" />
                <el-option label="8k-10k" :value="4" />
                <el-option label="10k-15k" :value="5" />
                <el-option label="15k-25k" :value="6" />
                <el-option label="25k-35k" :value="7" />
                <el-option label="35k-50k" :value="8" />
                <el-option label="50k以上" :value="9" />
              </el-select>
            </el-form-item>
            <el-form-item prop="skill" label="技能要求">
              <el-input
                  v-model="addJobStore.skill"
                  :autosize="{ minRows: 2,maxRows:10}"
                  autocomplete="off"
                  clearable
                  style="width: 605px"
                  type="textarea"
                  placeholder="请输入技能要求"
              />
            </el-form-item>
            <el-form-item class="inputWidth" prop="enable_status" label="是否启用" >
              <el-select
                  v-model="addJobStore.enable_status"
                  placeholder="请选择是否启用"
                  clearable
              >
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item class="inputWidth" prop="weight" label="推荐值(0为未推荐)"  style="margin-left: 55px">
              <el-input-number
                  v-model="addJobStore.weight"
                  class="mx-4"
                  :min="0"
                  controls-position="right"
              />
            </el-form-item>
          </el-form>
          <template #footer style="border-bottom: 1px solid #f0f0f0">
            <div class="dialog-footer">
              <el-button @click="cancel">取消</el-button>
              <el-button v-if="dialogTitle==='添加职位信息'" type="primary" @click="submitForm(FormRef,'新建')">
                确定
              </el-button>
              <el-button v-if="dialogTitle==='编辑职位信息'" type="primary" @click="submitForm(FormRef,'编辑')">
                确定
              </el-button>
            </div>
          </template>
        </el-dialog>
        <!--el-table表单数据-->
        <el-table :data="jobList.list" :size="tableSize" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" prop="" type="index" width="100" align="center"  />
          <el-table-column label="岗位" prop="post_id" width="120" align="center" >
            <template #default="{row}">
              <span v-if="row.post_id && row.position">{{row.position.name}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="所属分行"  prop="" width="150" align="center">
            <template #default="{row}">
              <span v-if="row.company_id && row.company">{{row.company.name}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="负责人"  prop="" width="150" align="center">
            <template #default="{row}">
              <span v-if="row.owner_id && row.owner">{{row.owner.username}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="job_type" label="工作类型" width="100" align="center">
            <template #default="{row}">
              <span v-if="row.job_type===0">不限</span>
              <span v-else-if="row.job_type===1">全职</span>
              <span v-else-if="row.job_type===2">兼职/临时</span>
              <span v-else-if="row.job_type===3">实习</span>
              <span v-else-if="row.job_type===4">校园</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="min_education" label="最低学历" width="100" align="center">
            <template #default="{row}">
              <span v-if="row.min_education===0">不限</span>
              <span v-else-if="row.min_education===1">初中及以下</span>
              <span v-else-if="row.min_education===2">高中</span>
              <span v-else-if="row.min_education===3">大专</span>
              <span v-else-if="row.min_education===4">本科</span>
              <span v-else-if="row.min_education===5">硕士</span>
              <span v-else-if="row.min_education===6">博士</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="exp_require" label="经验要求" width="100" align="center">
            <template #default="{row}">
              <span v-if="row.exp_require===0">不限</span>
              <span v-else-if="row.exp_require===1">一年以下</span>
              <span v-else-if="row.exp_require===2">1-3年</span>
              <span v-else-if="row.exp_require===3">3-5年</span>
              <span v-else-if="row.exp_require===4">5-10年</span>
              <span v-else-if="row.exp_require===5">10年以上</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="salary" label="薪资范围" width="100" align="center">
            <template #default="{row}" >
              <span v-if="row.salary===0">不限</span>
              <span v-else-if="row.salary===1">4k以下</span>
              <span v-else-if="row.salary===2">4k-6k</span>
              <span v-else-if="row.salary===3">6k-8k</span>
              <span v-else-if="row.salary===4">8k-10k</span>
              <span v-else-if="row.salary===5">10k-15k</span>
              <span v-else-if="row.salary===6">15k-25k</span>
              <span v-else-if="row.salary===7">25k-35k</span>
              <span v-else-if="row.salary===8">35k-50k</span>
              <span v-else-if="row.salary===9">50k以上</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="技能要求" width="100" align="center" />
          <el-table-column label="启用状态" prop="" width="100" align="center">
            <template #default="{row}">
              <el-button v-if="row.enable_status===1" class="EnableBtn" size="small">启用</el-button>
              <el-button v-if="row.enable_status===0" class="BanBtn" size="small">禁用</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="推荐值" width="100" align="center" >
            <template #default="{row}">
              <span v-if="row.weight===0">不推荐</span>
              <span v-else>{{row.weight}}</span>
            </template>
          </el-table-column>
          <el-table-column label="编辑时间"  prop="" width="160" align="center">
            <template #default="scope">
              <span style="font-size: 14px">{{$filters.formatDate(scope.row.updated_at)}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100" align="center">
            <template #default="{row}">
              <span @click="openFormVisible('编辑',row)" class="Edit">编辑</span>
              <span class="Delete">审核</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <div class="demo-pagination-block">
          <div class="pageText" style="float: left;margin: 5px 15px">
            第 {{AllPages.per_page*AllPages.page-14}} -
            <span v-if="AllPages.per_page*AllPages.page<=AllPages.total">{{AllPages.page*AllPages.per_page}}</span>
            <span v-else>{{AllPages.total}}</span>
            条/总共 {{ AllPages.total }} 条
          </div>
          <el-pagination
              :current-page="AllPages.page"
              :page-size="AllPages.per_page"
              :pager-count="3"
              background
              layout="prev, pager, next"
              :total="AllPages.total"
              size="small"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              style="margin-top: 3px"
          />
        </div>
      </el-card>
    </section>
  </div>
</template>

<script setup>
import {computed, reactive, ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import Title from "components/public/Title";
import {Plus, RefreshRight, Setting, Sort} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {JobList,JobStore,JobUpdate} from "@/network/positionManagement";

const router = useRouter();
const route = useRoute();
const title = route.meta.title;


//保存职位管理信息
const jobList=ref({
  list:[],
  total:0
})
//获取分页
const AllPages=reactive({
  page:1,
  per_page:15,
  total:0
})
//获取职位管理信息
const AllJobList=()=>{
  JobList(AllPages).then((res)=>{
    console.log(res.data,'res1')
    const {list,total}=res.data.data
    jobList.value.list=list
    jobList.value.total=total
    // console.log(res.data.meta,'meta')
    AllPages.total=res.data.meta.total
    if (res.data.code===0){
      setTimeout(()=>{
        loading.value=false
      },600)
    }else {
      loading.value=true
    }
  })
}
AllJobList()


//新增
const addJobStore=ref({
  post_id:'',
  company_id:'',
  job_type:'',
  min_education:'',
  exp_require:'',
  salary:'',
  skill:'',
  weight:0,
  enable_status:1,
  owner_id:''

})
const addJobStore1={...addJobStore.value}
//表单校验
const FormRef=ref()
//表单校验规则
const rules=reactive({
  post_id:[{required: true, trigger: 'change',message: '请填写岗位' }],
  company_id:[{required: true, trigger: 'change',message: '请选择所属分行' }],
  job_type:[{required: true, trigger: 'change',message: '请选择工作类型' }],
  min_education:[{required: true, trigger: 'change',message: '请选择最低学历' }],
  exp_require:[{required: true, trigger: 'change',message: '请选择工作经验' }],
  salary:[{required: true, trigger: 'change',message: '请选择薪资范围' }],
  skill:[{required: true, trigger: 'change',message: '请输入技能要求' }],
  enable_status:[{ required: true, trigger: 'change',message: '请选择启用状态'}],
  weight:[{required: true, trigger: 'change',message: "请设置推荐值"}],
  owner_id:[{required: true, trigger: 'change',message: "请输入负责人"}]
})
// 控制弹窗显示
const dialogFormVisible=ref(false)
// 弹窗标题
const dialogTitle=ref('')
//表单行宽
const formLabelWidth = '140px'
//当为编辑时对数据储存
const selectedRow=ref()
// 打开新建/编辑弹窗
const openFormVisible=(type,row)=>{
  dialogFormVisible.value=true
  if (type==='新建'){
    dialogTitle.value='添加职位信息'
    if (FormRef.value){
      addJobStore.value=addJobStore1
      FormRef.value.resetFields();
    }
  }else if (type==='编辑'){
    dialogTitle.value='编辑职位信息'
    //记录当前行数据
    selectedRow.value=row
    //将选中行数据赋值给addBoss
    addJobStore.value={...row}
    //对后端获取的一些数据字段进行判断
    //岗位判断
    if (row.post_id && row.position){
      addJobStore.value.post_id=row.position.name
    }else{
      addJobStore.value.post_id=''
    }
    //分行判断
    if (row.company_id && row.company){
      addJobStore.value.company_id=row.company.name
    }else {
      addJobStore.value.company_id=''
    }
    //负责人判断
    if (row.owner_id && row.owner){
      addJobStore.value.owner_id=row.owner.username
    }else {
      addJobStore.value.owner_id=''
    }
  }
}

//提交表单数据
const submitForm = async (formEl,type) => {
  if (type==='新建'){
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        JobStore(addJobStore.value).then((data)=>{
          dialogFormVisible.value = false;
          if (data.data.code ===0) {
            ElMessage({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
            AllJobList()
          }else {
            ElMessage({
              showClose: true,
              message: "添加失败",
              type: "error",
            });
          }
          console.log(data,'dt')
        })
        // console.log('submit!',addBoss.value)
      } else {
        console.log('error submit!', fields)
      }
    })
  }else if (type==='编辑'){
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        const row= {...selectedRow.value}
        JobUpdate(addJobStore.value,row.id).then((data)=>{
          dialogFormVisible.value = false;
          if (data.data.code===0){
            ElMessage({
              showClose: true,
              message: "编辑成功",
              type: "success",
            });
            AllJobList()
          }else {
            ElMessage({
              showClose: true,
              message: data.data.message,
              type: "error",
            });
          }
          console.log(data,'update')
        })
        // console.log('submit!',addBoss.value)
      } else {
        console.log('error submit!', fields)
      }
    })
  }
}
//弹窗右上角小x关闭并重置表单清除校验
const handleClose = () => {
  dialogFormVisible.value=false
  // FormRef.value.resetFields();
}
//取消提交并重置表单清除校验
const cancel = () => {
  dialogFormVisible.value=false
  // FormRef.value.resetFields();
}

//loading区域加载
const loading = ref(true)
//刷新
const Refresh= () => {
  loading.value=true
  AllJobList()
}

//密度
const tableSize=ref('default')
const active1=ref(false)
const active2=ref(true)
const active3=ref(false)
const changeSize = (size) => {
  if (size === '紧凑') {
    tableSize.value = 'small'
    active1.value = true
    active2.value = false
    active3.value = false
  } else if (size === '默认') {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  } else if (size === '疏松') {
    tableSize.value = 'large'
    active1.value = false
    active2.value = false
    active3.value = true
  } else {
    tableSize.value = 'default'
    active1.value = false
    active2.value = true
    active3.value = false
  }
}

//current-page 改变时触发
const handleCurrentChange = (val) => {
  AllPages.page=val
  loading.value=true
  AllJobList()
}
//page-size 改变时触发
const handleSizeChange = (val) => {
  AllPages.per_page=val
  AllPages.page=1
  loading.value=true
  AllJobList()
}

</script>
<style scoped lang="scss">
.nav{
  height: 50px;
  float: right;
  /*刷新、密度、列设置样式*/
  :deep(.el-button--text){
    color: #1F1F1F;
    margin: 0 5px;
  }
  :deep(.el-button--text:hover){
    color:#409EFF;
  }
}
/*el-dialog部分样式*/
/*头部字体及下划线*/
:deep(.el-dialog__header){
  border-bottom: 1px solid var(--color-border);
}
:deep(.el-dialog__title){
  font-size: 16px;
  color: var(--color-text);
  font-weight: 500;
  line-height: 22px;
  padding: 5px 5px;
}
/*账号角色及状态输入框样式*/
:deep(.inputWidth){
  width: 275px;
  float: left;
}
:deep(.el-input-number){
  width: 275px;
}
/*el-upload图片上传样式*/
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
/*底部footer样式*/
:deep(.el-dialog__footer){
  display: block;
  border-top: 1px solid var(--color-border);
  margin-top: 30px;
  line-height: 30px;
}
/*el-table部分样式*/
/*table表头*/
:deep(.el-table){
  font-weight: normal;
  color: var(--color-text);
}
:deep(.el-table .el-table__header th){
  background-color:var(--color-background-2);
  font-weight: normal;
  color: var(--color-text);
}
:deep(.el-table .el-table__header th>.cell){
  border-right: 1px solid #0000000f;
}
:deep(.el-table .el-table__header th:last-child>.cell){
  border-right: none;
}
:deep(.cell){
  line-height: 30px;
}
/*账号状态样式*/
.EnableBtn,.BanBtn{
  cursor: text;
}
:deep(.EnableBtn){
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}
:deep(.BanBtn){
  color: #cf1322;
  background: #fff1f0;
  border-color: #ffa39e;
}
/*编辑和删除按钮*/
.Edit,.Delete{
  cursor: pointer;
  color:#1890ff;
  padding:0 5px ;
}
/*分页组件*/
.demo-pagination-block{
  height: 50px;
  float: right;
  padding-top: 10px;
}
</style>

/*el-upload图片上传样式*/
<style>
.avatar-uploader .el-upload {
  width: 100px;
  height: 100px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  position: relative;
  font-size: 20px;
  color: currentcolor;
  width: 100px;
  height: 100px;
  text-align: center;
  padding-bottom: 10px;
  .imgText{
    font-size: 14px;
    font-style:normal;
    position: absolute;
    left: 25%;
    top:60%;
  }
}
</style>